<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>优田儿童成长中心</title>
    <!-- Styles -->
    <link href="/static/assets/fontAwesome/css/fontawesome-all.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/themify-icons.css" rel="stylesheet">
    <link href="/static/assets/css/lib/mmc-chat.css" rel="stylesheet"/>
    <link href="/static/assets/css/lib/sidebar.css" rel="stylesheet">
    <link href="/static/assets/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="/static/assets/css/lib/nixon.css" rel="stylesheet">
    <link href="/static/assets/lib/lobipanel/css/lobipanel.min.css" rel="stylesheet">
    <link href="/static/assets/css/style.css" rel="stylesheet">
</head>

<body>
<!-- Sidebar -->
<div class="sidebar sidebar-hide-to-small sidebar-shrink sidebar-gestures">
    <div class="nano">
        <div class="nano-content">
            <ul>
                <li><a href="/home/"><i class="ti-bar-chart"></i> 统计数据</a></li>
                <li><a href="/teacher/"><i class="ti-user"></i> 教师管理</a></li>
                <li class="active"><a href="/child/"><i class="ti-user"></i> 幼儿管理 <span
                        class="sidebar-collapse-icon ti-angle-right"></span></a></li>
                <li><a href="/posts/"><i class="ti-desktop"></i> 岗位管理</a></li>
            </ul>
        </div>
    </div>
</div>

<!-- Header -->
<div class="header">
    <div class="pull-left">
        <div class="logo">
            <a><img id="logoImg" src="/static/img/yt1.png" data-logo_big="/static/img/yt1.png"
                    data-logo_small="/static/img/yt3.png" alt="Nixon"/></a>
        </div>
        <div class="hamburger sidebar-toggle"><span class="ti-menu"></span></div>
    </div>
    <div class="pull-right p-r-15">
        <ul>
            <li class="header-icon dib">
                <img class="avatar-img" src="/static/assets/images/avatar/1.jpg" alt=""/> <span
                    class="user-avatar"><span th:text="${session.username}"></span>&nbsp;&nbsp;&nbsp;<i
                    class="ti-angle-down f-s-10"></i></span>
                <div class="drop-down dropdown-profile">
                    <div class="dropdown-content-body">
                        <ul>
                            <li><a href="/exit/"><i class="ti-power-off"></i> 注销</a></li>
                        </ul>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<!-- Main content -->
<div class="content-wrap">
    <div class="main">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-8 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <h1>幼儿管理</h1>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 p-0">
                    <div class="page-header">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="/child/">幼儿信息</a></li>
                                <li class="active">幼儿管理</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Data Table -->
            <div class="row">
                <div class="card alert">
                    <div class="card-header">
                        <h4>幼儿信息</h4>
                        <div class="card-header-right-icon">
                            <a href="/add_child/" class="btn btn-success m-b-10 m-l-5">添加幼儿</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-responsive table-hover">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>家长姓名</th>
                                <th>联系方式</th>
                                <th>入学状态</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="child-table-body">
                            </tbody>
                        </table>
                        <nav>
                            <ul class="pagination" id="pagination">
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
            Copyright &copy; 2024
        </div>
    </div>
</div>

<script src="/static/assets/js/lib/jquery.min.js"></script>
<script src="/static/assets/js/lib/jquery.nanoscroller.min.js"></script>
<script src="/static/assets/js/lib/sidebar.js"></script>
<script src="/static/assets/js/lib/bootstrap.min.js"></script>
<script src="/static/assets/js/lib/mmc-common.js"></script>
<script src="/static/assets/js/lib/mmc-chat.js"></script>
<script src="/static/assets/lib/lobipanel/js/lobipanel.js"></script>
<script src="/static/assets/js/scripts.js"></script>
<script>
    $(document).ready(function () {
        loadChildData(1, 8);
    });

    function loadChildData(page = 1, size = 8) {
        $.ajax({
            url: "/api/v1/manager/child/list",
            method: "GET",
            data: {page: page, size: size},
            success: function (res) {
                if (res.code === 200) {
                    const data = res.data;
                    renderTable(data.list);
                    renderPagination(data.total, data.pageNum, data.pageSize);
                } else {
                    alert("加载失败：" + res.msg);
                }
            },
            error: function () {
                alert("请求失败，请检查网络！");
            }
        });
    }

    function renderTable(list) {
        const tbody = $("#child-table-body").empty();
        list.forEach(c => {
            const status = c.flag === '1' ? '<span class="badge badge-success">正常</span>' : '<span class="badge badge-default" style="background:#8a8a8a;">退学</span>';
            let actions = '';

            if (c.flag === '1') {
                actions += `<a href="/update_child/?cid=${c.cid}" class="btn btn-success btn-sm">编辑</a>
                        <a href="javascript:;" onclick="del(${c.cid})" class="btn btn-danger btn-sm">退学</a> | `;
            } else {
                actions += `<a href="javascript:;" onclick="reEnroll(${c.cid})" class="btn btn-warning btn-sm">重新入学</a> | `;
            }

            actions += `<a href="/child_sign/?cid=${c.cid}" class="btn btn-primary btn-sm">签到管理</a>
                <a href="/child_pay/?cid=${c.cid}" class="btn btn-info btn-sm">缴费记录</a>`;

            const row = `<tr>
            <th scope="row">${c.cid}</th>
            <td>${c.cname}</td>
            <td>${c.csex}</td>
            <td>${c.cage}</td>
            <td>${c.cparnt}</td>
            <td>${c.ctel}</td>
            <td>${status}</td>
            <td>${actions}</td>
        </tr>`;
            tbody.append(row);
        });
    }

    function renderPagination(total, currentPage, pageSize) {
        const totalPages = Math.ceil(total / pageSize);
        const pagination = $("#pagination").empty();

        if (currentPage > 1)
            pagination.append(`<li class="page-item"><a class="page-link" href="javascript:;" data-page="${currentPage - 1}">上一页</a></li>`);
        else
            pagination.append(`<li class="page-item disabled"><a class="page-link">上一页</a></li>`);

        for (let i = Math.max(1, currentPage - 2); i <= Math.min(totalPages, currentPage + 2); i++) {
            pagination.append(`<li class="page-item ${i === currentPage ? 'active' : ''}"><a class="page-link" href="javascript:;" data-page="${i}">${i}</a></li>`);
        }

        if (currentPage < totalPages)
            pagination.append(`<li class="page-item"><a class="page-link" href="javascript:;" data-page="${currentPage + 1}">下一页</a></li>`);
        else
            pagination.append(`<li class="page-item disabled"><a class="page-link">下一页</a></li>`);

        $(".pagination .page-link").off("click").on("click", function () {
            const page = parseInt($(this).data("page"));
            if (!isNaN(page)) {
                loadChildData(page, pageSize);
            }
        });
    }

    function del(cid) {
        if (!confirm("确定将该幼儿设置为退学状态？")) return;

        $.ajax({
            type: "POST",
            url: "/api/v1/manager/child/leave",
            data: { cid: cid },
            success: function (res) {
                if (res.code === 200) {
                    alert("退学成功！");
                    location.reload();
                } else {
                    alert("退学失败：" + res.message);
                }
            },
            error: function () {
                alert("请求失败，请检查网络或服务！");
            }
        });
    }
    function reEnroll(cid) {
        if (!confirm("确定将该幼儿重新设置为在读状态？")) return;

        $.ajax({
            type: "POST",
            url: "/api/v1/manager/child/reEnroll",
            data: { cid: cid },
            success: function (res) {
                if (res.code === 200) {
                    alert("重新入学成功！");
                    location.reload();
                } else {
                    alert("重新入学失败：" + res.message);
                }
            },
            error: function () {
                alert("请求失败，请检查网络或服务！");
            }
        });
    }
</script>
<style>.copyrights {
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}</style>
<div class="copyrights">
    <h3>&copy; 版权所有 | BYHK工作室2024</h3>
</div>
</body>
</html>
